<template>
  <div class="type_container">
    <div ref="type_echarts" class="type_echarts"> </div>
  </div>
</template>

<script setup lang="ts" name="typeAnalysisEcharts">
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'
const type_echarts = ref(null)
const myChart = ref({})

const init_Ehcarts = () => {
  const typeEharts = echarts.init(type_echarts.value)
  myChart.value = typeEharts

  let option = {
    title: {
      text: "",
      x: "center",
      y: "center",
      textStyle: {
        fontSize: 20,
      },
    },
    tooltip: {
      trigger: "item",
    },
    series: [
      {
        type: "pie",
        center: ["50%", "50%"],
        radius: ["24%", "45%"],
        clockwise: true,
        avoidLabelOverlap: true,
        hoverOffset: 15,
        itemStyle: {
          normal: {
            borderColor: "#fff",
            borderWidth: 2,
          },
        },
        label: {
          show: true,
          position: "outside",
          formatter: "{a|{b}：{d}%}\n{hr|}",
          rich: {
            hr: {
              backgroundColor: "t",
              borderRadius: 3,
              width: 3,
              height: 3,
              padding: [3, 3, 0, -12],
            },
            a: {
              padding: [-30, 15, -20, 15],
            },
          },
        },
        labelLine: {
          normal: {
            length: 20,
            length2: 30,
            lineStyle: {
              width: 1,
            },
          },
        },
        data: [
          {
            name: "华为",
            value: 200,
          },
          {
            name: "小米",
            value: 260,
          },
          {
            name: "OPPO",
            value: 150,
          },
          {
            name: "苹果",
            value: 300,
          },
        ],
      },
    ],
  };

  option && typeEharts.setOption(option)

}

onMounted(() => {
  init_Ehcarts()
})
</script>

<style scoped lang="less">
.type_container {
  .type_echarts {
    width: 100%;
    height: 310px;
  }
}
</style>